<template>
  <a-card :bordered="false" :class="{'abcdefg':true}">
    <div class="no-print" style="text-align: right">
      <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
    </div>
    <section ref="print" id="printContent" class="abcdefg">
      <div style="text-align: center">
        <p style="font-size: 24px;font-weight: 800">打印测试表单</p>
      </div>
      <!--签字-->
      <a-col :md="24" :sm="24">
        <div class="sign" style="text-align: left;height: inherit">
          <a-col :span="24">
            <span>打印人员:</span>
            <a-input style="width: 30%" v-model="printer" />
            <span style="margin-left: 12.5%">打印日期:</span>
            <a-input style="width: 30%" v-model="printTime" />
          </a-col>
          <a-col :span="24"></a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>打印内容:</span>
            <a-input style="width: 80%" v-model="printContent" />
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>打印目的:</span>
            <a-input style="width: 80%" v-model="printReason" />
          </a-col>
          <a-col style="margin-top: 20px" :span="24">
            <span>打印图片:</span>
            <br />
            <a-upload
              action="/jsonplaceholder.typicode.com/posts/"
              listType="picture-card"
              :fileList="fileList"
              @preview="handlePreview"
              @change="handleChange"
            >
              <div v-if="fileList.length < 3">
                <a-icon type="plus" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-col>
        </div>
      </a-col>
    </section>
  </a-card>
  <!--</page-layout>-->
</template>
<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ARow from 'ant-design-vue/es/grid/Row'
import ATextarea from 'ant-design-vue/es/input/TextArea'

export default {
  components: {
    ATextarea,
    ARow,
    ACol
  },
  name: 'Printgzsld',
  props: {
    reBizCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      columns: [{}],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      printer: '张三',
      printTime: '2019-02-01 12:00:00',
      printContent: '打印内容就是,做一个打印测试',
      printReason: '做一个打印测试',
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        },
        {
          uid: '-2',
          name: 'pic1.png',
          status: 'done',
          url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg'
        }
      ],
      url: {
        loadApplicant: '/sps/register/loadApplicants',
        loadRegisterFiles: '/sps/register/getRegisterFilesConfig'
      }
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    loadData() {},
    getDate() {
      // 当前时间
    },
    handleCancel() {
      this.previewVisible = false
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    }
  }
}
</script>
<style scoped>
.abcdefg .ant-card-body {
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 1%;
  border: 0px solid black;
  min-width: 800px;
}
.explain {
  text-align: left;
  margin-left: 50px;
}
.explain .ant-input,
.sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}
.explain div {
  margin-bottom: 10px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>